<template>
  <div class="container">
    <Simplebar
      v-if="hasScroll"
      class="scrollbar-wrapper"
      data-simplebar-auto-hide="true"
    >
      <div class="child-content">
        <slot v-if="!loading && !nodata"></slot>
      </div>
    </Simplebar>
    <slot v-if="!hasScroll && !loading && !nodata"></slot>
    <div class="loading" v-if="loading">
      <div class="sk-chase">
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
        <div class="sk-chase-dot"></div>
      </div>
    </div>
    <div class="nodata" v-if="nodata">
      <img class="timg" src="../../assets/no-content.png" alt="" />
      <span class="text">{{ nodataText }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import Container from "./model"
export default Container
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  flex: 1;
  // display: flex;
  // overflow: auto;
  position: relative;
  .scrollbar-wrapper {
    flex: 1;
    // border-right: 1px solid #dfdfdf;
    overflow-x: hidden !important;
    overflow-y: auto;
    ::v-deep .simplebar-wrapper {
      height: 100%;
    }
    ::v-deep .simplebar-scrollbar:before {
      background: #555;
    }
  }
  .loading {
    --sk-color: #409eff;
    // position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .nodata {
    // position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .timg {
      display: block;
      width: 306px;
      height: 160px;
      position: relative;
    }
    .text {
      font-size: 14px;
      font-weight: 400;
      color: #8894a1;
      margin-top: 26px;
    }
  }
}
</style>
